<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>保养计划</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" href="../../css/iconfont.css" />
		<style>
			* { touch-action: none; }
			.mui-card .mui-control-content {
				padding: 10px;
			}
			/*自定义样式*/
			html,body{
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
			}
			a{
				color: #ffffff;
			}
			.mui-content{
				width: 100%;
				height: 100%;
				background: #ffffff;
			}
			.mui-bar{
				background:#4F77AA ;
				color: #ffffff;
				-webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
    			box-shadow: 0 0 1px rgba(0,0,0,0);
			}
			.mui-title{
				color: #ffffff;
			}
			.content_item{
				width: 100%;
				height: 100%;
			}
			.content_item .mui-control-content{
				width: 100%;
				height: 100%;
			}
			
			.mui-segmented-control{
				width: 50%;
				margin-left: 25%;
				border: 1px solid #4F77AA;
				border-radius: 15px;
			}
			.mui-segmented-control .mui-control-item{
				line-height: 30px;
			}
			.mui-segmented-control .mui-control-item1{
				border-radius: 15px 0 0 15px;
			}
			.mui-segmented-control .mui-control-item2{
				border-radius: 0px 15px 15px 0px;
			}
			.mui-segmented-control .mui-control-item.mui-active{
				background: #4F77AA;
			}
			.mui-segmented-control .mui-control-item{
				border-color:#4F77AA;
				border-left: 1px solid #4F77AA;
				color: #4F77AA;
			}
			.mui-media-object i{
				font-size: 42px;
			    color: #999999;
			    margin-top: 20px;
			}
			.mui-table-view .mui-media-object.mui-pull-left{
				margin-right: 20px;
			}
			.mui-table-view .mui-media-object{
				width: 36px;
			    height: 36px;
			     line-height: 36px;
			}
			.mui-media-runbutton{
			    text-align: center;
			    border-radius: 50% 50%;
			    margin-top: 20px;
			}
			.mui-media-runbutton span{
				color: #FFFFFF;
				font-size: 12px;
			}
			.color-primary{
				background: #1ab394;
			}
			.color-success {
			    background: #08B107;
				}
			.color-info {
			    background: #23c6c8;
			}
			.color-warning {
			    background: #f8ac59;
			}
			.color-wait{
				background: #FB665F;
			}
			.mui-media-body span.date{
				color:#f8ac59 ;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
			<h1 class="mui-title">保养计划</h1>
		</header>
		<div class="mui-content">
			<div class="content_item">
				<div id="item1" class="mui-control-content mui-active">
					<div id="scroll" class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell mui-media" onclick="workorder()">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-success"><span class="" style="">进</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-success"><span class="" style="">进</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<!--图标是图-->
								<!--<li class="mui-table-view-cell mui-media">
										<img class="mui-media-object mui-pull-left" src="../../img/shuijiao.jpg">
										<div class="mui-media-body">
											<p class='mui-ellipsis'>计划编号：20190825001</p>
											<p class='mui-ellipsis'>计划名称：日检</p>
											<p class='mui-ellipsis'>位置范围：</p>
											<p class='mui-ellipsis'>计划时间：08-25 13.51 至 08-25 15.51</p>
										</div>
								</li>-->
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-wait"><span class="" style="">待</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-wait"><span class="" style="">待</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-wait"><span class="" style="">待</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-wait"><span class="" style="">待</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-wait"><span class="" style="">待</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
								<li class="mui-table-view-cell mui-media">
										<div class="mui-media-object mui-pull-left mui-media-runbutton color-wait"><span class="" style="">待</span></div>
										<div class="mui-media-body">
											<p class='mui-ellipsis'>设备编码：GTS-14-001</p>
											<p class='mui-ellipsis'>计划名称：台式钻床</p>
											<p class='mui-ellipsis'>规格型号：Z520-A</p>
											<p class='mui-ellipsis'>计划时间：<span class="date">2019-08-25 00:00</span></p>
										</div>
								</li>
							</ul>
						
						</div>
					</div>
				</div>

			</div>
		</div>
		<script src="../../js/jquery-1.11.3.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui('body').on('tap','a',function(){
				window.top.location.href=this.href;
			});
			(function($) {
				$('#scroll').scroll({
					indicators: true //是否显示滚动条
				});
				var segmentedControl = document.getElementById('segmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						var styleEl = document.querySelector('input[name="style"]:checked');
						var colorEl = document.querySelector('input[name="color"]:checked');
						if (styleEl && colorEl) {
							var style = styleEl.value;
							var color = colorEl.value;
							segmentedControl.className = 'mui-segmented-control' + (style ? (' mui-segmented-control-' + style) : '') + ' mui-segmented-control-' + color;
						}
					}
				});
			})(mui);

			function workorder(){
				window.location.href="maintenance_workorder.html?flag=info";
			}
			$(document).on("click","span.mui-pull-left",function(){
				window.location.href="../../../index.html";
			})
		</script>

	</body>

</html>